<template>
  <el-dialog
    title="图片剪裁"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="55%"
    @close="cancel"
  >
    <div class="cropper-content">
      <div class="title">裁剪</div>
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :img="copperImgUrl"
          :output-size="copperOption.outputSize"
          :output-type="copperOption.outputType"
          :auto-crop-width="autoCropWidth"
          :auto-crop-height="autoCropHeight"
          :fixed-number="fixedNumber"
          :can-scale="copperOption.canScale"
          :info="true"
          :full="copperOption.full"
          :can-move="copperOption.canMove"
          :can-move-box="copperOption.canMoveBox"
          :original="copperOption.original"
          :auto-crop="copperOption.autoCrop"
          :fixed="copperOption.fixed"
          :center-box="copperOption.centerBox"
          :info-true="copperOption.infoTrue"
          :fixed-box="copperOption.fixedBox"
          @realTime="realTime"
        />
      </div>
      <div class="tip">tip:可拖动裁剪框进行裁剪，鼠标滚轮控制图片大小</div>
    </div>
    <div class="real-pic">
      <div class="title">裁剪预览</div>
      <div
        class="show-preview"
        :style="{
          width: previews.w + 'px',
          height: previews.h + 'px',
          overflow: 'hidden',
          margin: '5px'
        }"
      >
        <div :style="previews.div">
          <img :src="copperImgUrl" :style="previews.img">
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="finishCopper">上 传</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from 'vue-cropper';
import axios from 'axios';
export default {
  name: 'CropperDialog',
  components: {
    VueCropper
  },
  props: {
    autoCropWidth: {
      default: 0,
      type: Number
    },
    autoCropHeight: {
      default: 0,
      type: Number
    },
    fixedNumber: {
      default: () => [1, 1],
      type: Array
    },
    copperDialogVisible: {
      default: false,
      type: Boolean
    },
    copperImgUrl: {
      default: '',
      type: String
    },
    fileInfo: {
      default: () => {},
      type: Object
    }
  },
  data() {
    return {
      previews: '',
      copperOption: {
        imgUrl: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        // fixedNumber: [16, 9], // 截图框的宽高比例
        canMove: false,
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      }
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.copperDialogVisible;
      },
      set(flag) {
        this.$emit('update:copperDialogVisible', flag);
      }
    }
  },
  methods: {
    // 确认裁剪完毕
    finishCopper() {
      this.$confirm(`确定上传裁剪图吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$refs.cropper.getCropBlob(data => {
            const file = new File([data], this.fileInfo.name, {
              type: data.type
            });
            const formData = new FormData();
            formData.append('uid', '123');
            formData.append('fileType', 'pic');
            formData.append('file', file);
            axios({
              headers: {
                'Content-type': 'multipart/form-data'
              },
              method: 'post',
              url: process.env.VUE_APP_BASE_API + '/admin/resource/uploadFile',
              data: formData
            }).then(res => {
              if (res.code === '200') {
                this.$emit('finishCopper', res.data.id);
              } else {
                this.$message.error('文件上传失败，请重试！');
              }
            });
          });
        })
        .catch(() => {});
    },
    cancel() {
      this.$emit('copperDialogCancel');
    },
    // 预览
    realTime(data) {
      this.previews = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.real-pic {
  display: inline-block;
  vertical-align: top;
}
.title {
  font-size: 16px;
  margin-bottom: 15px;
}
.tip {
  font-size: 14px;
  padding-top: 15px;
}
.cropper-content {
  vertical-align: top;
  display: inline-block;
  .cropper {
    width: 500px;
    height: 300px;
  }
}
</style>
